<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.2.5.1.js"></script>
</head>

<body>
    <script>
        //   刚开始学时，感觉自己懂了。可是到用时才发现自己是渣渣中的渣渣。。。
        //   想通过路由id的变化来改变组件的加载数据时，遇到了一个问题，就是，组件不会重新渲染。一脸懵逼了，，，
        //  找到了watch的监控方法时，又用不好。扣扣会用了一些，赶紧记下来。

        //         首先确认 watch是一个对象， 一定要当成对象来用。
        //         对象就有键， 有值。
        //         键： 就是你要监控的那个家伙， 比如说$route， 这个就是要监控路由的变化。 或者是data中的某个变量。
        //         值可以是函数： 就是当你监控的家伙变化时， 需要执行的函数， 这个函数有两个形参， 第一个是当前值， 第二个是变化后的值。
        //         值也可以是函数名： 不过这个函数名要用单引号来包裹。
        //         第三种情况厉害了。
        //         值是包括选项的对象： 选项包括有三个。

        //         第一个handler： 其值是一个回调函数。 即监听到变化时应该执行的函数。
        //         第二个是deep： 其值是true或false； 确认是否深入监听。（ 一般监听时是不能监听到对象属性值的变化的， 数组的值变化可以听到。）
        //         第三个是immediate： 其值是true或false； 确认是否以当前的初始值执行handler的函数。
        var vm = new Vue({
            data: {
                a: 1,
                b: 2
            },
            watch: {
                a: function(val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                // 方法名
                b: 'someMethod',
                // 选项的对象
                c: {
                    handler: function(val, oldVal) {
                        //此处代码逻辑
                    },
                    deep: true,
                    immediate: true
                }
            }
        })
    </script>
</body>

</html>